<template>
	<view>
		<u-navbar class="navbar" :border-bottom="false" title="推送列表" :title-size="36" :title-bold="true" :title-color="textColor">
		</u-navbar>
		<view class="box-padding">
			<view class="item" v-for="(item,index) in list" :key="index" :style="{position: 'relative' ,border: index+1 == list.length ? 'none': ''}">
				<image src="/static/logo.png" style="width: 100rpx;height:100rpx;border-radius: 10rpx;" mode=""></image>
				<view class="u-flex-col u-row-around u-m-l-20" style="height: 100rpx;max-width: 50%;">
					<text>{{ item.title }}</text>
					<text style="font-size: 26rpx; color: #666666;overflow-x: hidden;white-space: nowrap;text-overflow:ellipsis">{{ item.content }}</text>
				</view>
				<view style="position: absolute;right:0;top:0">
					<text class="u-font-24 grey-color">{{ item.time }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					{
						title: '文章标题',
						content: '这里是文章内容，很多很多很多很多很多很多很多很多很多',
						time: '2020-08-31 16:34'
					},
					{
						title: '文章标题',
						content: '这里是文章内容，很多很多很多很多很多很多很多很多很多',
						time: '2020-08-31 16:34'
					},
					{
						title: '文章标题',
						content: '这里是文章内容，很多很多很多很多很多很多很多很多很多',
						time: '2020-08-31 16:34'
					},
					{
						title: '文章标题',
						content: '这里是文章内容，很多很多很多很多很多很多很多很多很多',
						time: '2020-08-31 16:34'
					},
					{
						title: '文章标题',
						content: '这里是文章内容，很多很多很多很多很多很多很多很多很多',
						time: '2020-08-31 16:34'
					}
				]
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
</style>

<style lang="scss" scoped>
	.item {
		border-bottom: 2rpx solid #F3F3F3;
		position: relative;
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		padding-bottom: 30rpx;
	}
</style>
